@(logedUser:Option[String], pref:models.User.Preferences)(implicit s:dao.Session)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Language" content="es" />
  <meta name="language" content="es" />
  <title>REWIND</title>
  <script type="text/javascript" src="@asset("public/js/jquery-1.4.1.min.js")"></script>
  
  <script type="text/javascript" src="@asset("public/js/fancybox/jquery.fancybox-1.3.4.pack.js")"></script>
  <link rel="stylesheet" href="@asset("public/js/fancybox/jquery.fancybox-1.3.4.css")" type="text/css" media="screen" />
  
  <link rel="stylesheet" href="@asset("public/css/rewind.css")" type="text/css" media="screen" />
  
  <link rel="stylesheet" href="@asset("public/themes/default/css/style.css")" type="text/css" media="screen" />
  <link rel="stylesheet" href="@asset("public/themes/default/css/size.css")" type="text/css" media="screen" />
  <script type="text/javascript" src="@asset("public/js/settings.js")"></script>
  <script type="text/javascript">
  $(document).ready(function(){
  
    $("#wrapper").css({
            position:'absolute',
            left: ($(window).width() - $('#wrapper').outerWidth())/2,
            top: ($(window).height() - $('#wrapper').outerHeight())/2
    });
    
    $("#process-error").hide();
    $("#process-success").hide();
    
  });
  
  </script>
</head>
<body>
<div id="wrapper">

@views.Application.html.top(logedUser)

<div id="content">
  <div id="process-error" class="error"><p>Error al guardar los cambios.<br />Intente de nuevo.</p></div>
  <div id="process-success" class="error"><p>Cambios guardados.</p></div>
  <form id="user-settings">
    <input type="hidden" name="pref.fontSize" id="fontSize" value="@pref.fontSize" />
    <input type="hidden" name="pref.themeName" id="themeName" value="@pref.themeName" />
  </form>
  <div id="settings-container">
    <h2>Fuente</h2>
    <p>Ajuste el tamaño del texto de acuerdo a sus necesidades.</p>
    <ul id="font-selector" class="block">
      <li id="10"><a href="#">Pequeña</a></li>
      <li id="12"><a href="#">Mediana (recomendada)</a></li>
      <li id="14"><a href="#">Grande</a></li>
      <li id="18"><a href="#">Enorme</a></li>
    </ul>
    
    <h2>Estilo del sitio</h2>
    <p>Elija entre diversos motivos y adapte el sitio como más le guste</p>
    <ul id="theme-selector" class="block">
      <li id="default">
        <a href="#">
          <img src="/public/themes/default/thumb.png" width="136" height="96"/><br />
          Estándar
        </a>
      </li>
    </ul>
    
  </div>
</div>
  
</div>

</body>
</html>
